<template>
  <div class="two-pie">
    <v-chart ref="chart_left" class="echarts" :option="option_left" autoresize />
    <v-chart ref="chart_right" class="echarts" :option="option_right" autoresize />
  </div>
</template>

<script>
import { reactive } from '@vue/composition-api'
import pieOption from '../options/pieOption'
import cloneDeep from 'lodash/cloneDeep'
const randomNumber = () => +(Math.random() * 200).toFixed(2)
export default {
  setup(props, { refs }) {
    const option_left = reactive(cloneDeep(pieOption))
    const option_right = reactive(cloneDeep(pieOption))
    const data_left = [
      { value: randomNumber(), name: '制造业' },
      { value: randomNumber(), name: '建筑行业' },
      { value: randomNumber(), name: '农林牧渔业' },
      { value: randomNumber(), name: '零售业' },
      { value: randomNumber(), name: '采矿业' },
      { value: randomNumber(), name: '其他' }
    ]
    const data_right = [
      { value: randomNumber(), name: '制造业' },
      { value: randomNumber(), name: '建筑行业' },
      { value: randomNumber(), name: '农林牧渔业' },
      { value: randomNumber(), name: '零售业' },
      { value: randomNumber(), name: '采矿业' },
      { value: randomNumber(), name: '其他' }
    ]
    let total_left = 0
    let total_right = 0
    data_left.forEach((item) => {
      total_left = total_left + item.value
    })
    data_right.forEach((item) => {
      total_right = total_right + item.value
    })
    option_left.title.text = total_left.toFixed(2)
    option_left.title.subtext = '授信余额'
    option_left.series[0].data = data_left
    option_left.series[0].labelLayout = (params) => {
      const isLeft = params.labelRect.x < refs.chart_right.getWidth() / 2
      const points = params.labelLinePoints
      // Update the end point.
      points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
      return {
        labelLinePoints: points
      }
    }

    option_right.title.text = total_right.toFixed(2)
    option_right.title.subtext = '不良余额'
    option_right.series[0].data = data_right
    option_right.series[0].labelLayout = (params) => {
      const isLeft = params.labelRect.x < refs.chart_left.getWidth() / 2
      const points = params.labelLinePoints
      points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
      return {
        labelLinePoints: points
      }
    }
    return {
      option_left,
      option_right
    }
  }
}
</script>

<style scoped lang="scss">
.two-pie {
  display: flex;
  .echarts {
    height: 280px;
    width: 50%;
  }
}
</style>
